<!--
代码模板说明：
1.codeGenaratorExample 为例子用的实体名称，可批量替换掉
2.普通查询、高级查询、列表显示字段替换成自己业务的列表字段
3.请求地址自行替换
-->
<template>
  <el-container id="lap-app">
    <el-main>
      <lap-find-bar>
        <template slot="default">
          <!-------------------------------------------------->
          <!--普通查询开始-->
          <el-input
            placeholder="输入模拟器名称/描述回车"
            v-model="pSearchValue"
            style="width: 250px"
          ></el-input>
          <!--普通查询结尾-->
        </template>
      </lap-find-bar>
      <lap-table-bar>
        <template slot="title">模拟器列表</template>
      </lap-table-bar>
      <el-table
        ref="table"
        :data="
          pTableData.filter(
            (item) =>
              item.Name.toLowerCase().indexOf(
                (pSearchValue || '').toLowerCase()
              ) >= 0 ||
              item.Description.toLowerCase().indexOf(
                (pSearchValue || '').toLowerCase()
              ) >= 0
          )
        "
        :highlight-current-row="true"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          property="Name"
          label="模拟器名称"
          width="250"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-link @click="() => onDetail(scope.row)">{{
              scope.row.Name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          property="TypeFullName"
          label="类"
          width="250"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          property="Direct"
          label="发起方"
          width="100"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{
            scope.row.Direct === 0 ? "本系统" : "第三方系统"
          }}</template>
        </el-table-column>
        <el-table-column
          property="Description"
          label="描述"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="禁用/启用" fixed="right" width="90">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.Disabled"
              :active-value="false"
              :inactive-value="true"
              @change="onChangeSwitch(scope.row)"
            ></el-switch
          ></template>
        </el-table-column>
      </el-table>

      <!--编辑页面-->
      <el-dialog
        custom-class="lap-form-edit lap-dialog-full"
        title="模拟器配置"
        v-if="pEditVisible"
        :visible.sync="pEditVisible"
        :close-on-click-modal="false"
        :before-close="platBeforeCloseForm"
      >
        <MockScriptEdit
          ref="formEdit"
          :dataId="pSelectedId"
          @after-submit="onAfterSubmit"
        ></MockScriptEdit>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
/**
 * 此注释段用于标记页面可被自动注册到路由
 * auto-route
 */
const MockScriptEdit = () => import("./MockScriptEdit"); //编辑页面组件
export default {
  mixins: [$lap.BaseView],
  name: "lap-app",
  components: { MockScriptEdit }, //引用组件
  data() {
    return {
      pTitle: "触发器管理", //页面标题
      pPageFunctionCode: "", //页面功能定义，例如：00100104
    };
  },
  methods: {
    /**
     * 平台加载方法
     */
    platLoadData() {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=GetMockList", {}, null, {
          that,
        })
        .then((data) => {
          that.pTableData = data;
        });
    },
    /**
     * 搜索
     */
    onSearch(e, advanced) {
      if (advanced === true) {
        //高级查询
        this.pFilterValue = "";
        this.platBuildConditionList();
      } else {
        //普通查询
        this.platClearConditionList();
        this.pFilterValue = this.pSearchValue;
      }

      this.platLoadData();
    },
    /**
     * 编辑
     */
    onDetail(row) {
      const that = this;
      that.pSelectedId = row.Name;
      that.pEditVisible = true;
    },
    /**
     * 单模拟器开关
     */
    onChangeSwitch(row) {
      $lap.post("/MYWS/MockHandler.ashx?type=MockerSwitch", {
        MockName: row.Name,
        Disabled: row.Disabled,
      });
    },
    /**
     * 表单数据提交成功后
     */
    onAfterSubmit(data, opts = {}) {
      const that = this;
      if (opts.close) {
        //关闭表单
        that.pEditVisible = false;
      }
      //刷本页面处理
      that.platLoadData();
    },
  },
  watch: {},
};
</script>